<template>
  <div ref="pieRef" class="main">饼图</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    var chartDom = this.$refs.pieRef
    var myChart = echarts.init(chartDom)
    var option

    option = {
      legend: {
        top: 'bottom'
      },

      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [10, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: var(--main-bg-color);
}
</style>
